<template>
  <div class="center_statis">
    <div ref="echartsRef" style="width: 700px; height: 210px"></div>
  </div>
</template>

<script setup name="AttendanceStatistics">
import { ref, onMounted, nextTick, shallowRef } from "vue";
import * as echarts from "echarts";
import { getPersonNumApi } from "../../../api/home/index";

const chart = shallowRef(null);
const echartsRef = ref(null);

const option = ref({
  backgroundColor: "#ffffff",
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "#57617B",
      },
    },
  },
  legend: {
    icon: "rect",
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ["出勤", "休息", "补卡", "缺卡", "迟到", "加班"],
    right: "4%",
    textStyle: {
      fontSize: 12,
      color: "#93989E",
    },
  },
  grid: {
    top: "15%",
    left: "3%",
    right: "10%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: "#EFEFF1",
        },
      },
      axisLabel: {
        margin: 10,
        fontSize: 14,
        color: "#93989E",
      },
      data: [],
    },
  ],
  yAxis: [
    {
      name: "人数",
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#D8D8DA",
        },
      },
      axisLabel: {
        margin: 10,
        fontSize: 14,
        color: "#93989E",
      },
      splitLine: {
        lineStyle: {
          color: "#D8D8DA",
        },
      },
    },
  ],
  series: [
    {
      name: "出勤",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(182, 75, 250,0.6)",
            },
            {
              offset: 0.8,
              color: "rgba(182, 75, 250,0.1)",
            },
          ],
          false
        ),
        shadowColor: "rgba(182, 75, 250,0.4)",
        shadowBlur: 10,
      },
      itemStyle: {
        color: "rgba(182, 75, 250,1)",
      },
      data: [10, 11, 0, 2, 9, 8],
    },
    {
      name: "休息",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(62, 151, 249,0.6)",
            },
            {
              offset: 0.8,
              color: "rgba(62, 151, 249,0.1)",
            },
          ],
          false
        ),
        shadowColor: "rgba(62, 151, 249,0.4)",
        shadowBlur: 10,
      },
      itemStyle: {
        color: "rgba(62, 151, 249,1)",
      },
      data: [20, 0, 10, 0, 19, 10],
    },
    {
      name: "补卡",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(247, 102, 236,0.6)",
            },
            {
              offset: 0.8,
              color: "rgba(247, 102, 236,0.1)",
            },
          ],
          false
        ),
        shadowColor: "rgba(247, 102, 236,0.4)",
        shadowBlur: 10,
      },
      itemStyle: {
        color: "rgba(247, 102, 236,1)",
      },
      data: [4, 0, 7, 0, 9, 6],
    },
    {
      name: "缺卡",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(242, 198, 62,0.6)",
            },
            {
              offset: 0.8,
              color: "rgba(242, 198, 62,0.1)",
            },
          ],
          false
        ),
        shadowColor: "rgba(242, 198, 62,0.4)",
        shadowBlur: 10,
      },
      itemStyle: {
        color: "rgba(242, 198, 62,1)",
      },
      data: [7, 0, 5, 0, 3, 0],
    },
    {
      name: "迟到",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(152, 100, 246,0.6)",
            },
            {
              offset: 0.8,
              color: "rgba(152, 100, 246,0.1)",
            },
          ],
          false
        ),
        shadowColor: "rgba(152, 100, 246,0.4)",
        shadowBlur: 10,
      },
      itemStyle: {
        color: "rgba(152, 100, 246,1)",
      },
      data: [7, 4, 10, 3, 3, 6],
    },
    {
      name: "加班",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(59, 218, 135,0.6)",
            },
            {
              offset: 0.8,
              color: "rgba(59, 218, 135,0.1)",
            },
          ],
          false
        ),
        shadowColor: "rgba(59, 218, 135,0.4)",
        shadowBlur: 10,
      },
      itemStyle: {
        color: "rgba(59, 218, 135,1)",
      },
      data: [1, 6, 10, 0, 2, 8],
    },
  ],
});

onMounted(() => {
  nextTick(() => {
    chart.value = echarts.init(echartsRef.value);
    chart.value.setOption(option.value);
  });
});

const getPersonNum = () => {
  option.value.xAxis[0].data = [];
  option.value.series[0].data = [];
  option.value.series[1].data = [];
  option.value.series[2].data = [];
  option.value.series[3].data = [];
  option.value.series[4].data = [];
  option.value.series[5].data = [];

  getPersonNumApi().then((res) => {
    if ((res.code = 200)) {
      res.data.map((item) => {
        option.value.xAxis[0].data.push(item.attendDay);

        option.value.series[0].data.push(item.attendPersonNum); //出勤人数
        option.value.series[1].data.push(item.restPersonNum); //休息人数
        option.value.series[2].data.push(item.repairPersonNum); //补卡人数
        option.value.series[3].data.push(item.notClockPersonNum); //缺卡人数
        option.value.series[4].data.push(item.latePersonNum); //缺卡人数
        option.value.series[5].data.push(item.overtimePersonNum); //缺卡人数
      });
      chart.value.setOption(option.value);
    }
  });
};

getPersonNum();
</script>

<style scoped lang="scss">
.center_statis {
}
</style>
